<template>
  <div class="">
    <div
      class="container"
      style="display: flex;flex-direction: column;width: 100%;height: 85vh;justify-content: center;"
    >
        <div
          style="display: flex;justify-content: space-between;padding-bottom:10px;"
          class="block"
        >
 
          <el-card style="width: 100%;">
            <div
              style="display: flex;justify-content: space-between;flex-direction: row;"
              class="block"
            >
            <div  style="flex:2;display: flex;justify-content: flex-end;">
                 <el-input style="flex: 1;"
                    v-model="select_action"
                    placeholder="请求路径"
                  />
                   <el-input style="flex: 1;"
                     v-model="select_name"
                     placeholder="功能名"
                   />
                  <div style="flex: 1;" >
                              
                      <el-select
                        v-model="select_access"
                        placeholder="标识"
                      >
                        <el-option
                          :key="key"
                          v-for="(item,key) in select_accesslist"
                          :label="item"
                          :value="key"
                        />
                      </el-select>
                   
                  </div>
                  <div style="flex: 1;">
                    <el-button
                        type="primary"
                        @click="getData"
                      >
                        获取数据
                    </el-button>
                  </div>
            </div>

              <div style="flex:1;display: flex;justify-content: flex-end;">
                <el-button
                  v-if="!isTrashed"
                  type="primary"
                  style="align-self: flex-end;"
                  icon="el-icon-circle-plus-outline"
                  @click="ClickAddVisible('add')"
                >
                  添加新功能
                </el-button>
                <el-button
                  v-if="isTrashed"
                  type="info"
                  icon="el-icon-arrow-left"
                  @click="trashed(0)"
                >
                  切回
                </el-button>
                <el-button
                  v-else
                  type="info"
                  class="iconfont icon-lajigarbage7"
                  style="font-size: 0.9em;"
                  @click="trashed(1)"
                >
                  回收站
                </el-button>
              </div>
            </div>
          </el-card>
        </div>
      <div style="flex:1">
        <el-table
          :data="userData"
          type="index"
          border
          class="table"
          ref="multipleTable"
          max-height="700"
          style="width: 100%;"
        >
          <el-table-column
            prop="id"
            label="ID"
            width="100"
          />
          <el-table-column
            width="100"
            label="开放状态"
            size="small"
          >
            <template slot-scope="scope">
              <div
                slot="reference"
                class="name-wrapper"
              >
                <span v-html="state[scope.row.state]" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="标识"
            width="100"
          >
            <template slot-scope="scope">
              <div>
                <span v-html="scope.row.access?scope.row.access:'未定义'" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="功能名称"
            width="100"
          >
            <template slot-scope="scope">
              <div>
                <span v-html="scope.row.name?scope.row.name:'未定义'" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            width="160"
            label="url地址"
            size="small"
          >
            <template slot-scope="scope">
              <div
                slot="reference"
                class="name-wrapper"
              >
                <span v-html="scope.row.url" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            label="功能说明"
            min-width="100"
          >
            <template slot-scope="scope">
              <div>
                <span v-html="scope.row.content?scope.row.content:'未定义'" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="编辑"
            width="160"
          >
            <template slot-scope="scope">
              <div v-if="!isTrashed">
                <el-button
                  type="text"
                  size="small"
                  icon="el-icon-edit"
                  @click="handleEdit('edit', scope.row)"
                >
                  编辑
                </el-button> 
                <el-button
                  type="text"
                  size="small"
                  icon="el-icon-delete"
                  style="color:red"
                  @click="handleDelete('del', scope.row)"
                >
                  删除
                </el-button>
              </div>
              <div v-else>
                <el-button
                  type="text"
                  plain
                  size="small"
                  icon="el-icon-refresh"
                  style="color:red"
                  @click="handleDelete('restore', scope.row)"
                >
                  恢复
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  icon="el-icon-delete"
                  style="color:red"
                  @click="handleDelete('del', scope.row,true)"
                >
                  彻底删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div
          class="pagination"
          style=""
        >
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="10"
            layout="prev, pager, next"
            :total="tableData.length"
          />
        </div>
      </div>
    </div>

    <!-- 公共form表单弹出框 -->
    <el-dialog
      :title="action=='add'?'添加功能接口':'修改功能接口'"
      :visible.sync="editVisible"
      width="40%"
    >
      <div
        class="form-box"
        style="align-self: center;"
      >
        <el-form
          ref="form"
          :model="form"
          label-width="160px"
        >
          <el-form-item
            v-if="action!='add'"
            label="ID"
          >
            <el-input
              disabled
              :value="form.id"
            />
          </el-form-item>
          <el-form-item label="是否开放">
            <el-select
              style=" width:100%"
              v-model="form.state"
              placeholder="请选择"
            >
              <el-option
                :key="index"
                v-for="(item,index) in state"
                :label="item"
                :value="index"
              >
                <span style="float: left">{{ state[index] }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ index }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标识">
            <el-input
              placeholder="入口文件名不含后缀"
              v-model="form.access"
            />
          </el-form-item>
          <el-form-item label="功能名称">
            <el-input
              placeholder="用户注册"
              v-model="form.name"
            />
          </el-form-item>
          <el-form-item label="功能说明">
            <el-input
              placeholder="新用户注册页面无需验证"
              v-model="form.content"
            />
          </el-form-item>
          <el-form-item label="url地址">
            <el-input
              placeholder="admin/admin"
              v-model="form.url"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit('form')"
            >
              提交
            </el-button>
            <el-button @click="editVisible=false">
              取消
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<style>
    .safe-content {
        align-items: center;
        display: flex;
        justify-content: center;
        padding: 10px;
        font-size: 30px;
        padding: 20px;
    }

    .safe-content div {
        flex: 1;
    }

    .safe-content div:last-child {
        text-align: left;
    }

    .safe-content div:first-child {
        text-align: right;
    }
</style>
<script>
//     import Time from "../../common/utils/Time.js"
import yc from "yc-js";
var Time=yc.Time;
    import Request from "../../request/index.js"
    export default {
        name: 'AdminList',
        data() {
            return {
                action: 'add',
                grade: [],
                tableData: [],
                dataP: 0,
                dataNum: 10, //数量
                isTrashed: 0,
                editVisible: false, //编辑
                form: {
                    id: '',
                    access:'system',
                    content: '',
                    url: '',
                    name: '',
                    state: 0
                },
                state: {
                    0: "开放",
                    1: "不开放"
                },
                select_access:null,
                select_action:null,
                select_name:null,
                select_accesslist:{
                  system:'系统管理',
                  admin:'后台管理'
                }
            }
        },
        created() {
            this.getGrade();
            this.getData();
        },
        watch:{
           isTrashed(e){
               this.page=1;
           },select_access(e){
              // this.getData();
           },select_action(){
             this.search()
           },select_name(){
             this.search()
           }
        },
        computed: {
            userData: {
                get() {
                    // 分页处理
                    var data = [];
                    var tableData = this.tableData;
                    var p = this.dataP;
                    var num = this.dataNum;
                    var pnum = p * num;
                    var pmax = pnum + num;
                    for (var i = 0; i < tableData.length; i++) {
                        if (i >= pnum && i < pmax) {
                            data.push(tableData[i])
                        }
                    }
                    return data;
                }
            }
        },
        methods: {
            search(){
              var tableData=this.AllData;
              this.page=1;
              var num=0;
              var data=tableData.filter(e=>{
                if( (!this.select_access || (e.access.indexOf(this.select_access)!=-1)) && (!this.select_action || (e.action.indexOf(this.select_action)!=-1)) && (!this.select_name || (e.func_name.indexOf(this.select_name)!=-1))){
                  num ++;
                  return e
                }
              });
              this.tableData=data;
              
            },
            // 分页导航
            handleCurrentChange(val) {
 
                this.dataP = val - 1;
            },
            ClickAddVisible(type) {
                this.action = type;
                this.formTitle = '添加';
                this.editVisible = true;
            },
            // 获取服务器权限列表
            getGrade() {
                Request.get('SystemSafeGrade_List')
                    .then((res) => {
                        if (res.data.code != 200) {
                            this.$notify({
                                title: '警告',
                                message: res.data.message,
                                type: 'warning'
                            });
                        } else {
                            // console.log(res.data);
                            var grade = res.data.data;
                            this.grade = grade;
                        }
                    })
                // this.province=Province;
            },
            trashed(e) {
                this.isTrashed = e;
                this.getData();
            },
            formatDate(val) {
                // 时间转换
                if (val) {
                    return Time.formatDate(val, 'yyyy-MM-dd')
                }
                return val;
            },
            // 向服务器发送请求获取 数据
            getData() {
                this.dataP = 0;
                var isTrashed = this.isTrashed;
                Request.get('SystemSafeUrl_List', {
                        params: {
                            trashed: isTrashed,
                            access:this.select_access
                        }
                    })
                    .then((res) => {
                      // console.log(res)
                        this.tableData = res.data.data;

                    })
            },
            handleEdit(type, row) {
                this.action = type;
                this.editVisible = true;
                this.formTitle = '修改';
                var form = this.form;
                for (let i in form) {
                    if (row[i]) {
                        form[i] = row[i];
                    }
                }
                this.form = form;
                this.row = row;
                // Object.assign(this.form,row)

            },
            onSubmit() {

                var formUp = {};
                if (this.action == 'add') {
                    formUp = this.form;
                    delete formUp['id'];
                } else {
                    for (let p in this.form) {
                        if (this.form[p] && this.row[p] != this.form[p]) {
                            formUp[p] = this.form[p]
                        }
                    }
                }

                var url = 'SystemSafeUrl_Update';
                var data = {
                    form: formUp
                };
                switch (this.action) {
                    case 'add':
                        url = 'SystemSafeUrl_Add';
                        break;
                    default:
                        Object.assign(data, {
                            id: this.row.id
                        })
                        break;
                }

                Request(url, {
                        data: data
                    })
                    .then(res => {
                        let rt = res.data;

                        if (rt.code == 200) {
                            this.$notify({
                                title: this.formTitle + '成功',
                                type: 'success'
                            });
                            var grade = this.state;
                            if (this.action == 'add') {
                                this.tableData.push(rt.data);
                            } else {
                                this.tableData.filter((e) => {
                                    if (e.id == this.form.id) {
                                        return Object.assign(e, this.form);
                                    }
                                });
                            }


                            this.editVisible = false;
                        } else {
                            this.$notify({
                                title: '警告',
                                message: '操作失败' + res.data.message,
                                type: 'warning'
                            });
                        }

                    })

            },
            handleDelete(type, row, isTrue) {
                var type = type || 'del';
                var caozuo = {
                    del: {
                        title: '删除',
                        api: 'SystemSafeUrl_Delete',
                    },
                    restore: {
                        title: '恢复',
                        api: 'SystemSafeUrl_Restore',
                    }
                }
                if (!caozuo[type]) {
                    this.$alert('非法操作？', '错误提示', {
                        confirmButtonText: '确定',
                        type: 'warning',
                    });
                    return;
                }
                var data = {
                    id: row.id,
                    isTrue:false
                }
                if (isTrue) {
                    data.isTrue = true
                }
                var CZ = caozuo[type];
                var length = 1;
                this.$confirm('此次操作您将会' + CZ.title + length + '条数据，是否真的要' + CZ.title + '？', '确认' + CZ.title, {
                        distinguishCancelAndClose: true,
                        type: 'warning',
                        confirmButtonText: '立即' + CZ.title,
                        cancelButtonText: '放弃'
                    })
                    .then(() => {
                        Request(CZ.api, {
                                data: data
                            })
                            .then(res => {
                                let rt = res.data;
                                if (rt.code == 200) {
                                    this.$notify({
                                        title: CZ.title + '成功',
                                        type: 'success',
                                        message: res.data.message,
                                    });
                                    this.tableData = this.tableData.filter((d) => {
                                        if (d.id != row.id) {
                                            return d;
                                        }
                                    })
                                    // this.$message.success('删除成功');
                                } else {
                                    this.$notify({
                                        title: '警告',
                                        message: '操作失败' + res.data.message,
                                        type: 'warning'
                                    });
                                }

                            })
                    })

                this.delVisible = false;
            }
        }
    }
</script>
